﻿<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>药店统计管理</el-breadcrumb-item>
    <el-breadcrumb-item>入库统计</el-breadcrumb-item>
  </el-breadcrumb>
<div style="display: flex;width: 100%">
    <div style="width: 23%">
        <div style="margin-left: 10px" >药品分类</div>
        <div style="margin-left: 10px;margin-top:5px">
           <el-select style="width:95%" size="mini" v-model="value"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
    </div>
    <div style="width: 23%">
        <div style="margin-left: 10px" >药品名称</div>
        <div style="margin-left: 10px;margin-top:5px">
           <el-select style="width:95%" size="mini" v-model="value"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
    </div>
    <div style="width: 23%">
        <div style="margin-left: 10px" >入库日期</div>
        <div style="margin-left: 10px;margin-top:5px" class="block">
           <el-date-picker style="width:95%" v-model="selectDay" size="mini" type="date" placeholder="选择日"  value-format="yyyy-MM-dd"></el-date-picker>
        </div>
    </div>
    <div >
          <el-button type="info"  style="margin-top:40%" size="small">查询</el-button>
    </div>
</div>
<!-- 库存信息 -->
<div>
   <el-table :header-cell-style="{background:'rgb(55,61,65)',color:'#fff','text-align':'center'}"

    :data="tableData"
    height="350"
    :cell-style="{'text-align':'center'}"

    style="width: 100%">
    <el-table-column
      prop="goods_name"
      label="药品名称"
      width="260"
      >
    </el-table-column>
    <el-table-column
      prop="entry_number"
      label="入库数量"
      width="260">
    </el-table-column>
    <el-table-column
      prop="entry_date"
      label="入库时间"
        width="260">
    </el-table-column>
    <el-table-column
      prop="head"
      label="负责人"
        width="260">
    </el-table-column>
    <el-table-column
      prop="list_number"
      label="单据号"
      >
    </el-table-column>
  </el-table>
</div>
    <!--图表  -->
<div id="chart" style="width:600px;height:400px;background-color:#fff;margin-top:15px">

</div>
</div>
</template>

<script>

import echarts from 'echarts'
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [{
          goods_name: '大力丸',
          entry_number: 17,
          entry_date: '2022-5-27',
          head:'虎妞',
          list_number:'01-02'
        }, {
          goods_name: '印度神油',
          entry_number: 35,
          entry_date: '2022-5-29',
          head:'虎妞',
          list_number:'01-02'
        }, {
          goods_name: '穿心莲',
          entry_number: 30,
          entry_date: '2022-6-27',
          head:'虎妞',
          list_number:'01-02'
        }, {
         goods_name: '地黄丸',
          entry_number: 29,
          entry_date: '2022-7-1',
          head:'虎妞',
          list_number:'01-02'
        }, {
         goods_name: '强力丸',
          entry_number: 29,
          entry_date: '2022-7-2',
          head:'虎妞',
          list_number:'01-02'
        }, {
          goods_name: '六神丸',
          entry_number: 25,
          entry_date: '2022-7-5',
          head:'虎妞',
          list_number:'01-02'
        }],
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        value1:'',
        selectDay:new Date(),
    };
  },
  watch: {},
  computed: {},
  methods: {
    getdata(){
      axios.get('http://172.22.8.91:8080/ruku/get_all_data')
      .then(response => {
        console.log(response)
        var res=JSON.parse(JSON.stringify(response)).data.data;
        this.tableData=res
        // var inf = response.data.data.goods_na
        // console.log(inf)
        
      })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    initChart(data_c){
      var chartDom = document.getElementById('chart');
      var myChart = echarts.init(chartDom);
      var data_chart =[]
      /*
      goods_name: '大力丸',
          entry_number: 17,*/
      
      for(var i=0;i<data_c.length;i++)
        data_chart.push({value: data_c[i].entry_number, name:data_c[i].goods_name})
      var option = {
  title: {
    text: '小药店入库统计表',
    subtext: '小小的标题',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: JSON.parse(JSON.stringify(data_chart)),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
    };
    myChart.setOption(option)
      
    }
},
created(){
   this.getdata()

},
mounted(){
  setTimeout(()=>{
    this.initChart(JSON.parse(JSON.stringify(this.tableData)))
  },100)
}
};
</script>
<style lang="less" scoped>
// .wrapper{}
</style>
